<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home Page</title>
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/head.css">
    <style>
        .header .right {
            display: flex;
            justify-content: space-between;
            width: 380px;
        }

        .header .right form:first-child {
            margin-right: 30px;
        }

        .header .right form:last-child {
            display: flex;
            flex: 1;
            justify-content: space-between;
            align-items: center;
        }

        .header .right form:last-child span {
            height: 100%;
            margin-right: 10px;
        }

        .main {
            padding-top: 20px;
        }

        .main .wrapper {
            display: flex;
            justify-content: space-between;
        }

        .main .wrapper .left {
            flex: 3;

        }

        .main .wrapper .center {
            flex: 6;
            margin: 0 20px;
        }

        .main .wrapper .right {
            flex: 3;
        }

        .main .wrapper .left .up {
            margin-bottom: 30px;
        }

        .ongoing-course {
            border-color: #BCE8F1;
        }

        .ongoing-course h3 {
            background-color: #D9EDF7;
            color: #31708F;
            text-align: center;
        }

        .work-deadline {
            border-color: #EBCCD1;
        }

        .work-deadline h3 {
            background-color: #F2DEDE;
            color: #B04442;
            text-align: center;
        }

        .public-notice h3 {
            text-align: center;
        }

        .notice-content ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .notice-content li {
            width: 210px;
            height: 340px;
            border: 1px solid #ddd;
            padding: 0 5px;
        }

        .notice-content li .pic {
            width: 200px;
            height: 200px;
        }

        .notice-content .text {
            padding: 10px;
            height: 130px;
        }

        .notice-content .text h4 {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 10px;
        }

        .notice-content .text p:last-child {
            margin-top: 10px;
        }

        .forum {
            margin-top: 30px;
            border-color: #BCE8F1;
        }

        .forum h3 {
            background-color: #D9EDF7;
            color: #31708F;
        }

        .forum .panel-body {
            padding: 0;
        }

        .forum .forum-header {
            height: 80px;
            border-bottom: 1px solid #ddd;
        }

        .forum .forum-header h1 {
            height: 80px;
            line-height: 80px;
            text-align: center;
            font-weight: 500;
        }

        .forum .forum-content li {
            display: flex;
            justify-content: space-between;
            padding: 15px 10px;
            border-bottom: 1px solid #ddd;
        }

        .forum .forum-content .message-content {
            flex: 2;
        }

        .forum .forum-content .userinfo {
            flex: 1;
            display: flex;
            justify-content: space-between;
            margin-left: 10px;
        }

        .forum .forum-content .userinfo .username {
            color: #337ab7;
        }

        .forum .forum-content .userinfo .time {
            background-color: #777;
            height: 18px;
            padding: 3px;
            color: #fff;
            font-size: 10px;
            border-radius: 4px;
        }

        .unstarted-course {
            border-color: #BCE8F1;
        }

        .unstarted-course h3 {
            background-color: #D9EDF7;
            color: #31708F;
            text-align: center;
        }

        .right .down {
            margin-top: 30px;
        }

        .right .down button {
            width: 100%;
            height: 46px;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="wrapper">
        <div class="left">
            <h1><a href="/">Learning Management System</a></h1>
        </div>
        <div class="right">
            <form action="/user/login">
                <button class="btn" type="submit">Log In</button>
            </form>
            <form>
                <span class="input-box-span"><input class="input-box-span-input" type="text" placeholder="Search"
                                                    id="search-input" name="search_input"></span>
                <button type="button" class="btn" id="search">Search</button>
            </form>
        </div>
    </div>
</div>
<div class="main">
    <div class="wrapper">
        <div class="left">
            <div class="up">
                <div class="ongoing-course panel">
                    <h3 class="panel-title">Ongoing Course</h3>
                    <div class="panel-body">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Course ID</th>
                                <th>Course Name</th>
                                <th>Course Instructor</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                            </tr>
                            </thead>
                            <tbody id="having-course">
                            <!-- 课程数据 -->
                            </tbody>
                        </table>
                        <ul class="pagination" id="having-course-page">
                            <!-- 分页导航 -->
                        </ul>
                    </div>
                </div>
            </div>
            <div class="down">
                <div class="work-deadline panel">
                    <h3 class="panel-title">Coursework Deadline Reminder</h3>
                    <div class="panel-body">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>CW ID</th>
                                <th>Student Name</th>
                                <th>Course Name</th>
                                <th>CW Name</th>
                                <th>Deadline</th>
                            </tr>
                            </thead>
                            <tbody id="unfinished-homework">
                            <!-- 课程数据 -->
                            </tbody>
                        </table>
                        <ul class="pagination" id="unfinished-homework-page">
                            <!-- 分页导航 -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="up">
                <div class="public-notice panel">
                    <h3 class="panel-title">Public Notice Bar</h3>
                    <div class="panel-body">
                        <div class="notice-content">
                            <!-- 公告数据 -->
                            <ul id="notice">
                                <!-- 公告列表 -->
                            </ul>
                        </div>
                        <ul class="pagination" id="notice-page">
                            <!-- 分页导航 -->
                        </ul>
                    </div>
                </div>
            </div>
            <div class="down">
                <div class="forum panel">
                    <h3 class="panel-title">Forum</h3>
                    <div class="panel-body">
                        <div class="forum-header">
                            <h1>Communication</h1>
                        </div>
                        <div class="forum-content">
                            <ul id="message-board">
                                <!-- 留言板列表 -->
                            </ul>
                        </div>
                        <ul class="pagination" id="message-board-page">
                            <!-- 分页导航 -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="up">
                <div class="unstarted-course panel">
                    <h3 class="panel-title">Unstarted Courses</h3>
                    <div class="panel-body">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Course ID</th>
                                <th>Course Name</th>
                                <th>Start Date</th>
                            </tr>
                            </thead>
                            <tbody id="no-start-course">
                            <!-- 课程数据 -->
                            </tbody>
                        </table>
                        <ul class="pagination" id="no-start-course-page">
                            <!-- 分页导航 -->
                        </ul>
                    </div>
                </div>
            </div>
            <div class="down">
                <button type="button" class="btn">Enter the Course Selection</button>
            </div>
        </div>
    </div>
</div>
<script src="/static/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function () {
        havingCourseData(1);
        unfinishedHomeworkDate(1);
        noticelist(1)
        noStartCourse(1)
        messageBoardList(1)
        $('#having-course-page').on('click', 'li:not(.active, .disabled, .pp)', function () {
            havingCourseData($(this).attr('page'));
        });
        $('#unfinished-homework-page').on('click', 'li:not(.active, .disabled, .pp)', function () {
            unfinishedHomeworkDate($(this).attr('page'));
        });
        $('#notice-page').on('click', 'li:not(.active, .disabled, .pp)', function () {
            noticelist($(this).attr('page'));
        });
        $('#message-board-page').on('click', 'li:not(.active, .disabled, .pp)', function () {
            messageBoardList($(this).attr('page'));
        });
        $('#no-start-course-page').on('click', 'li:not(.active, .disabled, .pp)', function () {
            noStartCourse($(this).attr('page'));
        });

        $('.down button').click(function () {
            window.location.href = '/user/login';
        });

        // 搜索
        $('#search').on('click', function () {
            havingCourseData(1);
            unfinishedHomeworkDate(1);
            noticelist(1)
            noStartCourse(1)
            messageBoardList(1)
        })
    });

    function havingCourseData(page) {
        var search = $('#search-input').val();
        $.ajax({
            url: '/course/having',
            type: 'GET',
            data: {'page': page, 'page_size': 2, 'search': search},
            success: function (response) {
                console.log(response)
                if (response.code === 200) {
                    var courseList = response.data['course_list'];
                    var pages = response.data['pages'];
                    console.log(courseList)
                    console.log(pages)
                    // 更新课程列表
                    var data_html = '';
                    for (var i = 0; i < courseList.length; i++) {
                        var course = courseList[i];
                        data_html += '<tr>' +
                            '<th scope="row">' + (i + 1) + '</th>' +
                            '<td>' + course.course_name + '</td>' +
                            '<td>' + course.username + '</td>' +
                            '<td>' + course.start_date + '</td>' +
                            '<td>' + course.end_date + '</td>' +
                            '</tr>';
                    }
                    $('#having-course').html(data_html);
                    // 更新分页控制
                    $('#having-course-page').empty()
                    if (pages.is_prev === 1) {
                        $('#having-course-page').append('<li class="pp">\n' +
                            '<a href="javascript:prevHc()">\n' +
                            '    <span>&laquo;</span>\n' +
                            '</a>\n' +
                            '</li>')
                    }
                    for (var i = 0; i < pages.range.length; i++) {
                        if (pages.current === pages.range[i]) {
                            $('<li>').attr('page', pages.range[i]).addClass('active').append(
                                $('<a>').attr('href', '#').text(pages.range[i])).appendTo('#having-course-page')
                        } else {
                            $('<li>').attr('page', pages.range[i]).append(
                                $('<a>').attr('href', '#').text(pages.range[i])).appendTo('#having-course-page')
                        }
                    }
                    if (pages.is_next === 1) {
                        $('#having-course-page').append(
                            '<li class="pp">\n' +
                            '    <a href="javascript:nextHc()">\n' +
                            '        <span>&raquo;</span>\n' +
                            '    </a>\n' +
                            '</li>'
                        )
                    }
                } else {
                    console.log("查询失败")
                }
            },
            error: function (xhr, status, error) {
                console.error('请求失败: ', status, error);
            }
        });
    }

    function prevHc() {
        var page = $('#having-course-page .active').attr('page');
        havingCourseData(parseInt(page) - 1);
    }

    function nextHc() {
        var page = $('#having-course-page .active').attr('page')
        havingCourseData(parseInt(page) + 1);
    }

    function unfinishedHomeworkDate(page) {
        var search = $('#search-input').val();
        $.ajax({
            url: '/assignment/unfinished',
            type: 'GET',
            data: {'page': page, 'page_size': 2, 'search': search},
            success: function (response) {
                console.log(response)
                if (response.code === 200) {
                    var assignmentList = response.data['assignment_list'];
                    var pages = response.data['pages'];
                    console.log(assignmentList)
                    console.log(pages)
                    // 更新课程列表
                    var data_html = '';
                    for (var i = 0; i < assignmentList.length; i++) {
                        var ass = assignmentList[i];
                        data_html += '<tr>' +
                            '<th scope="row">' + (i + 1) + '</th>' +
                            '<td>' + ass.username + '</td>' +
                            '<td>' + ass.course_name + '</td>' +
                            '<td>' + ass.assignment_name + '</td>' +
                            '<td>' + ass.submit_deadline_time + '</td>' +
                            '</tr>';
                    }
                    $('#unfinished-homework').html(data_html);
                    // 更新分页控制
                    $('#unfinished-homework-page').empty()
                    if (pages.is_prev === 1) {
                        $('#unfinished-homework-page').append('<li class="pp">\n' +
                            '<a href="javascript:prevUh()">\n' +
                            '    <span>&laquo;</span>\n' +
                            '</a>\n' +
                            '</li>')
                    }
                    for (var i = 0; i < pages.range.length; i++) {
                        if (pages.current === pages.range[i]) {
                            $('<li>').attr('page', pages.range[i]).addClass('active').append(
                                $('<a>').attr('href', '#').text(pages.range[i])).appendTo('#unfinished-homework-page')
                        } else {
                            $('<li>').attr('page', pages.range[i]).append(
                                $('<a>').attr('href', '#').text(pages.range[i])).appendTo('#unfinished-homework-page')
                        }
                    }
                    if (pages.is_next === 1) {
                        $('#unfinished-homework-page').append(
                            '<li class="pp">\n' +
                            '    <a href="javascript:nextUh()">\n' +
                            '        <span>&raquo;</span>\n' +
                            '    </a>\n' +
                            '</li>'
                        )
                    }
                } else {
                    console.log("查询失败")
                }
            },
            error: function (xhr, status, error) {
                console.error('请求失败: ', status, error);
            }
        });
    }

    function prevUh() {
        var page = $('#unfinished-homework-page .active').attr('page');
        unfinishedHomeworkDate(parseInt(page) - 1);
    }

    function nextUh() {
        var page = $('#unfinished-homework-page .active').attr('page')
        unfinishedHomeworkDate(parseInt(page) + 1);
    }


    function noticelist(page) {
        var search = $('#search-input').val();
        $.ajax({
            url: '/notice/list',
            type: 'GET',
            data: {'page': page, 'page_size': 3, 'search': search},
            success: function (response) {
                console.log(response)
                if (response.code === 200) {
                    var noticeList = response.data['notice_list'];
                    var pages = response.data['pages'];
                    console.log(noticeList)
                    console.log(pages)
                    // 更新通知列表
                    var data_html = '';
                    var imgs = ['png', 'jpg', 'jpeg'];
                    for (var i = 0; i < noticeList.length; i++) {
                        var notice = noticeList[i];
                        console.log(imgs.includes(notice.file_name.split('.')[1]));
                        data_html += '<li>\n' +
                            '                                    <div class="pic">' + (imgs.includes(notice.file_name.split('.')[1]) ? '<img src="http://127.0.0.1:8080/static/uploads/' + notice.file_name + '" style="height: 100%; width: 100%;">' : '<iframe src="http://127.0.0.1:8080/static/uploads/' + notice.file_name + '" style="height: 100%; width: 100%;"></iframe>') + '</div>\n' +
                            '                                    <div class="text">\n' +
                            '                                        <h4>' + ((notice.notice_name.length > 8) ? notice.notice_name.substring(0, 10) + '...' : notice.notice_name) + '</h4>\n' +
                            '                                        <p>' + ((notice.notice_content.length > 23) ? notice.notice_content.substring(0, 23) + '...' : notice.notice_content) + '</p>\n' +
                            '                                        <p>' + notice.username + '</p>\n' +
                            '                                    </div>\n' +
                            '                                </li>'
                    }
                    $('#notice').html(data_html);
                    // 更新分页控制
                    $('#notice-page').empty()
                    if (pages.is_prev === 1) {
                        $('#notice-page').append('<li class="pp">\n' +
                            '<a href="javascript:prevNt()">\n' +
                            '    <span>&laquo;</span>\n' +
                            '</a>\n' +
                            '</li>')
                    }
                    for (var i = 0; i < pages.range.length; i++) {
                        if (pages.current === pages.range[i]) {
                            $('<li>').attr('page', pages.range[i]).addClass('active').append(
                                $('<a>').attr('href', '#').text(pages.range[i])).appendTo('#notice-page')
                        } else {
                            $('<li>').attr('page', pages.range[i]).append(
                                $('<a>').attr('href', '#').text(pages.range[i])).appendTo('#notice-page')
                        }
                    }
                    if (pages.is_next === 1) {
                        $('#notice-page').append(
                            '<li class="pp">\n' +
                            '    <a href="javascript:nextNt()">\n' +
                            '        <span>&raquo;</span>\n' +
                            '    </a>\n' +
                            '</li>'
                        )
                    }
                } else {
                    console.log("查询失败")
                }
            },
            error: function (xhr, status, error) {
                console.error('请求失败: ', status, error);
            }
        });
    }

    function prevNt() {
        var page = $('#notice-page .active').attr('page');
        noticelist(parseInt(page) - 1);
    }

    function nextNt() {
        var page = $('#notice-page .active').attr('page')
        noticelist(parseInt(page) + 1);
    }

    function messageBoardList(page) {
        var search = $('#search-input').val();
        $.ajax({
            url: '/message-board/list',
            type: 'GET',
            data: {'page': page, 'page_size': 3, 'search': search},
            success: function (response) {
                console.log(response)
                if (response.code === 200) {
                    var mbList = response.data['message_board_list'];
                    var pages = response.data['pages'];
                    console.log(mbList)
                    console.log(pages)
                    // 更新课程列表
                    var data_html = '';
                    for (var i = 0; i < mbList.length; i++) {
                        var mb = mbList[i];
                        data_html += '<li>\n' +
                            '                                    <div class="message-content">\n' +
                            '                                        <p>' + mb.message_content + '</p>\n' +
                            '                                    </div>\n' +
                            '                                    <div class="userinfo">\n' +
                            '                                        <span class="username">' + mb.username + '</span>\n' +
                            '                                        <span class="time">' + mb.update_time + '</span>\n' +
                            '                                    </div>\n' +
                            '                                </li>';
                    }
                    $('#message-board').html(data_html);
                    // 更新分页控制
                    $('#message-board-page').empty()
                    if (pages.is_prev === 1) {
                        $('#message-board-page').append('<li class="pp">\n' +
                            '<a href="javascript:prevMb()">\n' +
                            '    <span>&laquo;</span>\n' +
                            '</a>\n' +
                            '</li>')
                    }
                    for (var i = 0; i < pages.range.length; i++) {
                        if (pages.current === pages.range[i]) {
                            $('<li>').attr('page', pages.range[i]).addClass('active').append(
                                $('<a>').attr('href', '#').text(pages.range[i])).appendTo('#message-board-page')
                        } else {
                            $('<li>').attr('page', pages.range[i]).append(
                                $('<a>').attr('href', '#').text(pages.range[i])).appendTo('#message-board-page')
                        }
                    }
                    if (pages.is_next === 1) {
                        $('#message-board-page').append(
                            '<li class="pp">\n' +
                            '    <a href="javascript:nextMb()">\n' +
                            '        <span>&raquo;</span>\n' +
                            '    </a>\n' +
                            '</li>'
                        )
                    }
                } else {
                    console.log("查询失败")
                }
            },
            error: function (xhr, status, error) {
                console.error('请求失败: ', status, error);
            }
        });
    }

    function prevMb() {
        var page = $('#message-board-page .active').attr('page');
        messageBoardList(parseInt(page) - 1);
    }

    function nextMb() {
        var page = $('#message-board-page .active').attr('page')
        messageBoardList(parseInt(page) + 1);
    }

    function noStartCourse(page) {
        var search = $('#search-input').val();
        $.ajax({
            url: '/course/nostart',
            type: 'GET',
            data: {'page': page, 'page_size': 2, 'search': search},
            success: function (response) {
                console.log(response)
                if (response.code === 200) {
                    var courseList = response.data['course_list'];
                    var pages = response.data['pages'];
                    console.log(courseList)
                    console.log(pages)
                    // 更新课程列表
                    var data_html = '';
                    for (var i = 0; i < courseList.length; i++) {
                        var course = courseList[i];
                        data_html += '<tr>' +
                            '<th scope="row">' + (i + 1) + '</th>' +
                            '<td>' + course.course_name + '</td>' +
                            '<td>' + course.start_date + '</td>' +
                            '</tr>';
                    }
                    $('#no-start-course').html(data_html);
                    // 更新分页控制
                    $('#no-start-course-page').empty()
                    if (pages.is_prev === 1) {
                        $('#no-start-course-page').append('<li class="pp">\n' +
                            '<a href="javascript:prevNsc()" aria-label="Previous">\n' +
                            '    <span aria-hidden="true">&laquo;</span>\n' +
                            '</a>\n' +
                            '</li>')
                    }
                    for (var i = 0; i < pages.range.length; i++) {
                        if (pages.current === pages.range[i]) {
                            $('<li>').attr('page', pages.range[i]).addClass('active').append(
                                $('<a>').attr('href', '#').text(pages.range[i])).appendTo('#no-start-course-page')
                        } else {
                            $('<li>').attr('page', pages.range[i]).append(
                                $('<a>').attr('href', '#').text(pages.range[i])).appendTo('#no-start-course-page')
                        }
                    }
                    if (pages.is_next === 1) {
                        $('#no-start-course-page').append(
                            '<li class="pp">\n' +
                            '    <a href="javascript:nextNsc()" aria-label="Next">\n' +
                            '        <span aria-hidden="true">&raquo;</span>\n' +
                            '    </a>\n' +
                            '</li>'
                        )
                    }
                } else {
                    console.log("查询失败")
                }
            },
            error: function (xhr, status, error) {
                console.error('请求失败: ', status, error);
            }
        });
    }

    function prevNsc() {
        var page = $('#no-start-course-page .active').attr('page');
        noStartCourse(parseInt(page) - 1);
    }

    function nextNsc() {
        var page = $('#no-start-course-page .active').attr('page')
        noStartCourse(parseInt(page) + 1);
    }
</script>
</body>
</html>
